<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件绑定</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
		事件冒泡
		由于操作的过程中可能有嵌套的关系，所以会触发冒泡机制
		如果需要组织冒泡，则通常使用.stop修饰-->
		<div id="app" @click="addNum()">
			{{num}}
			<!-- 添加事件绑定 -->
			<button v-on:click.stop="num++">自增</button>
			
			<hr />
			<!-- 组织默认行为 -->
			<a href="http://www.baidu.com" @click="getMsg()">百度</a>
			<!-- 需求：如果组织默认的行为，则使用prevent属性 -->
			<a href="http://www.baidu.com" @click.prevent="getMsg">百度</a>
			
			<!-- 同步提交 改为异步提交 -->
			<form>
				<input name="name" />
				<input type="submit" value="提交" @click.prevent="submit()" />
			</form>
			<!-- 按键修饰符 通过按特定的键 出发事件 -->
			<input  type="text" name="name" @keyup.enter="handler()" value="按回车触发事件" />
		</div>
		
	</body>
	<script type="text/javascript">
		const app = new Vue({
			el:"#app",
			data:{
				num:100
			},
			methods:{
				// js中方法称之为函数
				addNum(){
					this.num++
				},
				getMsg(){
					console.log("发起Ajax请求")
				},
				submit(){
					console.log("提交")
				},
				handler(){
					console.log("")
				}
				
			}
		})
	</script>
</html>
